<template>
  <div class="guge">
    <div class="guge-box">
      <div v-if="fonds === 2">
        <div class="qrcode bd-borderBase flex js-ct align-center radius">
          <!-- <qr-code v-if="state.address" id="qr" :str="state.address"></qr-code> -->
          <img v-if="state.qrcode_url" :src="state.qrcode_url" alt="">
        </div>
        <div class="key text-14 text-t1">{{ $t("formTip.key") }}</div>
        <div class="key-word text-14 flex js-sp bd-borderBase">
          <marquee direction="left">{{ state.secret }}</marquee>
          <span class="text-login point" @click="copy">{{
            $t("global.copy")
          }}</span>
        </div>
      </div>
      <!-- <div v-else>
        <div class="key text-14 text-t1">{{ $t("login.password") }}</div>
        <div>
          <el-input
            ref="password"
            v-model="state.param.user_password"
            :type="state.passwordType"
            :placeholder="$t('formTip.loginPassTip')"
          >
            <template #suffix>
              <span class="show-pwd" @click="showPwd">
                <svg-icon
                  :data_iconName="
                    state.passwordType === 'password' ? 'ic_eye' : 'ic_eye_open'
                  "
                />
              </span>
            </template>
          </el-input>
        </div>
      </div> -->
      <div class="key text-14 text-t1">{{ $t("user.googleCode") }}</div>
      <div>
        <el-input
          v-model="state.param.verification_code"
          :placeholder="$t('user.googleCodeTip')"
        ></el-input>
      </div>
    </div>
    <div
      class="btn radius login-btn text-16 share-color point text-center"
      @click="confirm"
    >
      {{ $t("exchange.comfirm") }}
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, computed, nextTick, ref } from "vue";
import QrCode from "@/components/qrCode/QrCode.vue";
import { useStore } from "vuex";
import { Copy } from "@/utils/common";
import { ElMessage } from "element-plus";
import {
  googleCertification,
  closeGoogleCertification,
  safetyVerification,
  bind_google_auth,
  unbind_google_auth,
  bind_google_auth_post

} from "@/api/user";
import { useI18n } from "vue-i18n";
export default {
  name: "gugeFond",
  components: { QrCode },
  emits: ["bindSuccess", "safSuccess"],
  props: {
    fonds: Number //1安全验证 2绑定 3解除绑定
  },
  setup(props, { emit }) {
    const { t } = useI18n();
    const state = reactive({
      param: {},
      address: "",
      passwordType: "password"
    });
    const $store = useStore();
    const userinfo = computed(() => {
      return $store.state.user.userInfo;
    });
    onMounted(() => {
      console.log("props.fonds", props.fonds);
        //请求接口
     
      if (props.fonds === 2) {
        bind_google_auth().then((res) => {
        if (res.code==1) {
          state.qrcode_url=res.data.qrcode_url
							state.address=res.data.secret
							state.secret=res.data.secret
         
        }
      });
        // state.address = userinfo.value.user_google_url;
      }
    });
    const password = ref(null);
    //密文明文切换
    const showPwd = () => {
      if (state.passwordType === "password") {
        state.passwordType = "text";
      } else {
        state.passwordType = "password";
      }
      nextTick(() => {
        password.value.focus();
      });
    };
    // 复制
    const copy = () => {
      Copy(state.secret).then(() => {
        ElMessage({
          type: "success",
          message: "ok"
        });
      });
    };
    // 确认绑定
    const confirm = () => {
      if (!state.param.verification_code) {
        ElMessage.error(t("user.googleCodeTip"));
        return;
      }
      let param = { ...state.param };
      param.bind_code=param.verification_code,
      param.google_auth_secret=state.secret
      let requestFun = safetyVerification;
      if (props.fonds === 1) {
        param.type = "google";
      } else if (props.fonds === 2) {
        requestFun = bind_google_auth_post;
      } else if (props.fonds === 3) {
        requestFun = unbind_google_auth;
      }
      requestFun(param)
        .then(res => {
          if(res.code==1){
            if (props.fonds === 1) {
            emit("safSuccess", {
              safety_verification_key: res.data.safety_verification_key
            });
            state.param = {};
          } else if (props.fonds === 2) {
            emit("bindSuccess", false);
          } else if (props.fonds === 3) {
            emit("bindSuccess", false);
          }
          }else{
            ElMessage.error(res.msg);
          }
          //1验证 2绑定 3解绑
         
        })
        .catch(err => {
          ElMessage.error(err.message);
        });
    };
    return {
      state,
      userinfo,
      copy,
      confirm,
      showPwd,
      password
    };
  }
};
</script>

<style scoped lang="less">
.guge {
  width: 100%;
}
.guge-box {
  width: 220px;
  margin: 0 auto 30px;
}
.qrcode {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  img {
    width: 155px;
    height: 155px;
  }
}
.key {
  height: 38px;
  line-height: 38px;
}
.btn {
  height: 46px;
  line-height: 46px;
}
.key-word {
  width: 100%;
  height: 42px;
  line-height: 42px;
  margin-bottom: 12px;
  padding: 0 11px;
  marquee {
    width: 70%;
  }
}
.show-pwd {
  display: inline-block;
  position: absolute;
  right: 10px;
  // top: 7px;
  font-size: 16px;
  color: #889aa4;
  cursor: pointer;
  user-select: none;
}
</style>
